 <template>
  <div>
    <!-- 课程排行榜 -->
    <div class="card-style">
      <div class="clearfix">
        <h2>所有课程</h2>
      </div>

      <tTable :columns="columns" :data="tableData">
        <!-- 缩略图 -->
        <template v-slot:cover="slotProps">
          <img class="coverImg" :src="downImgHost + '/' + slotProps.scope.row.cover" alt>
        </template>
        <!-- 是否签约 -->
        <template v-slot:status="slotProps">{{slotProps.scope.row.status ? "已签约" : "未签约"}}</template>
      </tTable>
    </div>
  </div>
</template>

<script>
import tTable from "src/components/table/index.vue";

import { getCourse } from "src/service/course";
import { downImgHost } from "src/config/env.js"; // [华为云] [七牛云] [下载地址] [七牛云下载地址] [本地图片上传]
export default {
  data() {
    return {
      tableData: [], // 排行榜数据

      downImgHost: downImgHost,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "名称" }
        },
        {
          slot: "cover",
          attr: { prop: "cover", label: "缩略图" }
        },
        {
          slot: "status",
          attr: { prop: "status", label: "是否签约" }
        }
      ]
    };
  },
  components: { tTable },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      getCourse().then(res => {
        this.tableData = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.card-style {
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.coverImg {
  width: 100px;
  height: 100px;
}
</style>
